<template>
  <div class="bigDataBox">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="定时器请求动画" name="first">
        <div v-if="activeName === 'first'">
          <el-button
            style="margin-bottom: 12px"
            size="small"
            type="primary"
            :loading="loading"
            @click="plan"
            >点击请求加载</el-button
          >
          <el-table
            height="300"
            :data="arr"
            border
            style="width: 80%"
            :header-cell-style="{
              height: '24px',
              lineHeight: '24px',
              color: '#606266',
              background: '#F5F5F5',
              fontWeight: 'bold',
            }"
          >
            <el-table-column type="index" label="序"></el-table-column>
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="名字"></el-table-column>
            <el-table-column prop="value" label="对应值"></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="触底加载" name="second">
        <ButtomLoad v-if="activeName === 'second'" />
      </el-tab-pane>
      <el-tab-pane label="虚拟列表" name="third">
        <VirtualList v-if="activeName === 'third'" />
      </el-tab-pane>
      <el-tab-pane label="表格处理" name="fourth">
        <VirtualTable v-if="activeName === 'fourth'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// function averageFn(arr) {
//   let i = 0; // 从第0个开始
//   let result = []; // 定义结果，结果是二维数组
//   while (i < arr.length) {
//     // 从原始数组的第一项开始遍历
//     result.push(arr.slice(i, i + 10)); // 一次截取10个用于分堆
//     i = i + 10;
//   }
//   return result;
// }
import axios from "axios";
import ButtomLoad from "../components/bottomLoad/ButtomLoad";
import VirtualList from "../components/virtualList/VirtualList";
import VirtualTable from "../components/virtualTable/VirtualTable";
export default {
  name: "bigDataName",
  components: {
    ButtomLoad,
    VirtualList,
    VirtualTable,
  },
  data() {
    return {
      activeName: "first",
      arr: [],
      loading: false,
    };
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
    },


    // 1. 前端请求到十万条数据以后 先不着急渲染 先将10万条数据分堆分批次
    // 2. 例如一堆放10条数据 那么十万条就有一万堆
    // 3. 使用定时器 一次渲染一堆 渲染一万次就可以了



    // async plan(){
    //   this.loading = true
    //   const res = await axios.get('http://124.223.69.156:3300/bigData')
    //   this.loading = false

    //   console.log(res.data.data)
    //   let twoArr = this.averageFn(res.data.data)
    //   console.log(twoArr)
    //   // 分堆
    //   for (let i=0;i<twoArr.length;i++){
    //     setTimeout(()=>{
    //       this.arr = [...this.arr,...twoArr[i]]
    //     },20*i)
    //   }
    // },
    averageFn(arr){
      let i = 0;
      let res = []
      while( i < arr.length){
        // 一次截取十个用于分堆
        res.push(arr.slice(i,i+10))
        i = i+10
      }
      return res
    },
    async plan(){
      this.loading = true
      const res = await axios.get('http://124.223.69.156:3300/bigData')
      this.loading = false

      console.log(res.data.data)
      // 1 对数据进行分堆处理
      let twoArr = this.averageFn(res.data.data)
      console.log(twoArr)
      // 2 定义一个渲染函数 
      const useTwoArr = (page)=>{
        if(page > twoArr.length - 1){
          return
        }
        // 3 用动画请求帧来优化
        requestAnimationFrame(()=>{
          // 4 取出一项 拼接一项
          this.arr = [...this.arr,...twoArr[page]]
          // 5 这一项 进行下一项
          page = page + 1
          // 6 递归调用这个函数
          useTwoArr(page)
        })
      }

      useTwoArr(0)
      // 分堆
      // for (let i=0;i<twoArr.length;i++){
      //   setTimeout(()=>{
      //     this.arr = [...this.arr,...twoArr[i]]
      //   },20*i)
      // }
    },
    // requestAnimationFrame(()=>{})

    /**
     * 定时器
     */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
     // async plan(){
    //   this.loading = true
    //   const res = await axios.get('http://124.223.69.156:3300/bigData')
    //   this.loading = false
    //   // 将大数据分堆
    //   let twoArr = this.averageFn(res.data.data)
    //   console.log(twoArr)
    //   for(let i= 0;i<twoArr.length;i++){
    //     setTimeout(()=>{
    //       this.arr = [...this.arr,...twoArr[i]]
    //     },20*i)
    //   }
    // },

    // averageFn(arr){
    //   let i = 0
    //   let result = []
    //   while(i < arr.length){
    //     // 一次截取十个用于分堆
    //     result.push(arr.slice(i,i+10))
    //     i = i+10
    //   }
    //   return result
    // },

    // 大家可以看到定时器是有点卡顿的 

    // async plan(){
    //   this.loading = true
    //   const res = await axios.get('http://124.223.69.156:3300/bigData')
    //   this.loading = false
    //   // 1 将大数据进行分堆
    //   let twoArr = this.averageFn(res.data.data)
    //   // 2 定义一个函数 专门用来做渲染 使用的是二维数组里面的每一项
    //   const useTwoArr = (page)=>{
    //     if(page > twoArr.length - 1){
    //       return 
    //     }
    //     // 3 使用动画请求帧的方式
    //     requestAnimationFrame(()=>{
    //       // 4 取出一项就拼接上一项
    //       this.arr = [...this.arr,...twoArr[page]]
    //       // 5 这一项渲染了以后 进行下一项
    //       page = page+1
    //       // 6 递归调用 直到结束
    //       useTwoArr(page)
    //     })
    //   }

    //   useTwoArr(0)

    // }
    /**
     * 定时器
     * */
    // async plan() {
    //   this.loading = true;
    //   const res = await axios.get("http://124.223.69.156:3300/bigData");
    //   this.loading = false;
    //   let twoDArr = averageFn(res.data.data);
    //   for (let i = 0; i < twoDArr.length; i++) {
    //     // 相当于在很短的时间内创建许多个定时任务去处理
    //     setTimeout(() => {
    //       this.arr = [...this.arr, ...twoDArr[i]];
    //     }, 17 * i);
    //   }
    // },

    /**
     * 请求动画帧
     * */
    // async plan() {
    //   this.loading = true;
    //   const res = await axios.get("http://124.223.69.156:3300/bigData");
    //   this.loading = false;
    //   // 1. 将大数据量分堆
    //   let twoDArr = averageFn(res.data.data);
    //   // 2. 定义一个函数，专门用来做赋值渲染（使用二维数组中的每一项）
    //   const use2DArrItem = (page) => {
    //     // 4. 从第一项，取到最后一项
    //     if (page > twoDArr.length - 1) {
    //       console.log("每一项都获取完了");
    //       return;
    //     }
    //     // 5. 使用请求动画帧的方式
    //     requestAnimationFrame(() => {
    //       // 6. 取出一项，就拼接一项（concat也行）
    //       this.arr = [...this.arr, ...twoDArr[page]];
    //       // 7. 这一项搞定，继续下一项
    //       page = page + 1;
    //       // 8. 直至完毕（递归调用，注意结束条件）
    //       use2DArrItem(page);
    //     });
    //   };
    //   // 3. 从二维数组中的第一项，第一堆开始获取并渲染（数组的第一项即索引为0）
    //   use2DArrItem(0);
    // },
  },
};
</script>

<style lang="less" scoped>
.bigDataBox {
  box-sizing: border-box;
  padding-right: 240px;
}
</style>
